import Vue from 'vue'
import Vuex from 'vuex'
import {formatRouter} from "@/utils/formatRouter";
import router, {resetRouter} from "@/router";
import {fetchPermissions} from "@/api/system";

Vue.use(Vuex)
const state = {
    isCollapse: false,
    routerTage: [],
    orderPage: {},
    menuList: [],
    permissionList: [],
    loanRecordId: '',
    isMobile: false
}
const getters = {
    getOrderPage(state) {
        return state.orderPage
    },
    getMenu(state) {
        return state.menuList
    },
    getTagsList() {
        return state.routerTage
    },
    permissionList() {
        return state.permissionList
    },
    loanRecordId() {
        return state.loanRecordId
    },
}
const mutations = {
    TOGGLE_COLLAPSE: (state, isCollapse) => {
        state.isCollapse = isCollapse
    },
    SET_AUTH: (state, payload) => {
        const permissionObj = {}
        const permission = payload || []
        // 按钮数组格式化对象格式
        if (permission && permission.length) {
            const permissionList = (list) => {
                list.forEach(item => {
                    if (item.children && item.children.length) {
                        permissionList(item.children)
                    }
                    permissionObj[item.id] = item.url
                })
            }
            permissionList(permission)
        }
        // 将按钮权限注入vue原型链
        Vue.prototype.$permiss = permissionObj
        state.permissionList = permission
    },
    TOGGLE_DEVICE: (state, payload) => {
        state.isMobile = payload
    },
    TOGGLE_ROUTERTAGE: (state, payload) => {
        if (payload === 'clearAll') {
            state.routerTage = []
        } else {
            state.routerTage.push(payload)
        }
    },
    TOGGLE_ORDERPAGE: (state, payload) => {
        state.orderPage = payload
    },
    SET_MENULIST: (state, payload) => {
        state.menuList = payload
    },
    RESET_STATE: (state) => {
        Object.assign(state, {
            isCollapse: false,
            routerTage: [],
            orderPage: {},
            menuList: [],
            loanRecordId: '',
            permissionList: []
        })
    },
    SET_MESSAGE_ORDERID: (state, payload) => {
        state.loanRecordId = payload
    },
}
const actions = {
    getMenuList({commit}, payload) {
        return new Promise(async (resolve) => {
            const res = await fetchPermissions()
            if (res.code === 1) {
                // 全部菜单
                resolve(res.data)
            }
        })
    },
    setRouteTage({commit}, payload) {
        commit('TOGGLE_ROUTERTAGE', payload)
    },
    message_reminer({commit}, payload) {
        commit('SET_MESSAGE_ORDERID', payload)
    },
    clearCache({commit}) {
        commit('RESET_STATE')
    },
    convertRoutes({commit}, paload) {
        /**
         *  accessRoutes 动态渲染的路由
         *  sidebarList 侧边栏菜单
         * */
        const {accessRoutes} = formatRouter(paload)
        // 重置之前路由
        resetRouter()
        /**
         * 添加动态路由
         * */
        router.addRoutes([...accessRoutes, {
            path: '*',
            redirect: '/404'
        }])

    }
}
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})
export default store
